<template>
  <div class="home">
    <el-card class="box-card" shadow="hover">
      <div style="display: flex; margin-bottom: 10px">
        <span style="font-weight: bold">轮播图设置</span>
        <el-button
            style="margin-left: auto; "
            type="primary"
            @click="swiperNum"
        >
          <i class="el-icon-circle-plus-outline"></i>
          轮播图数量设置
        </el-button
        >

        <el-button
            style="margin-left: 20px  ; margin-right: 40px"
            type="primary"
            @click="add"
        >
          <i class="el-icon-circle-plus-outline"></i>
          增加
        </el-button
        >

      </div>
      <el-table :data="tableData" stripe border height="500">
        <el-table-column prop="img_file" label="轮播图">
          <template v-slot="scope">
            <el-image
                style="width:80px"
                :src="scope.row.img_file"
                :preview-src-list="[scope.row.img_file]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="排序值"></el-table-column>
        <el-table-column prop="modify_time" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.row)">
              <i class="el-icon-edit"></i>
              编辑轮播图
            </el-button>
            <el-popconfirm
                style="margin-left: 4px"
                title="您确定删除这行数据吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button slot="reference" type="text">
                <i class="el-icon-delete"></i>删除
              </el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页-->
      <div style="margin-top: 20px; display: flex">
        <el-pagination
            background
            :current-page="params.pageNum"
            :page-size="params.pageSize"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog title="添加轮播图" :visible.sync="IsAdd" width="30%">
        <el-form
            :model="Addform"
            label-width="100px"
            ref="ruleForm"
            :rules="rulesAdd"
        >
          <el-form-item label="图片" prop="img_file">
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:9080/api/swiper/upload'"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
            >
              <img v-if="Addform.img_file" :src="Addform.img_file" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="排序值" prop="priority">
            <el-input
                v-model="Addform.priority"
                placeholder="请输入排序值"
            ></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="IsAdd = false">取 消</el-button>
          <el-button type="primary" @click="addMsg">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="编辑轮播图" :visible.sync="IsEdit" width="30%">
        <el-form
            :model="Editform"
            label-width="100px"
            ref="ruleForm"
            :rules="rulesEdit"
        >
          <el-form-item label="图片" prop="img_file">
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:9080/api/swiper/upload'"
                :show-file-list="false"
                :on-success="handleCoverSuccessEdit"
            >
              <img v-if="Editform.img_file" :src="Editform.img_file" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="排序值" prop="priority">
            <el-input
                v-model="Editform.priority"
                placeholder="请输入排序值"
            ></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="IsEdit = false">取 消</el-button>
          <el-button type="primary" @click="editMsg">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="编辑轮播图数量" :visible.sync="isModify" width="30%">
        <el-form
            label-width="100px"
        >
          <el-input-number v-model="swiperNum1"  :min="1" :max="10" ></el-input-number>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="IsModify = false">取 消</el-button>
          <el-button type="primary" @click="modifySwiperNum">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import request from "@/api/request";
//   import Cookies from "js-cookie";

export default {
  name: "StudentList",
  data() {
    return {
      // 添加
      Addform: {},
      IsAdd: false,
      // 编辑
      Editform: {},
      rulesAdd: {
        img_file: [
          {required: true, message: "请上传图片", trigger: "blur"},
        ], priority: [
          {required: true, message: "请填写优先值", trigger: "blur"},
        ],
      },
      rulesEdit: {
        img_file: [
          {required: true, message: "请上传图片", trigger: "blur"},
        ], priority: [
          {required: true, message: "请填写优先值", trigger: "blur"},
        ],
      },
      IsEdit: false,
      isModify:false,
      // 展示

      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {},
      swiperNum1:"",
      params: {
        pageSize: 10,
        pageNum: 1,
        brandSrc: "",
      },
      rules: {},
    };
  },
  created() {
    this.load();
  },
  methods: {
    modifySwiperNum(){
      request.put("/api/swiper/modifySwiperNum/"+this.swiperNum1).then((res)=>{
        console.log(res);
        if(res.code===20000){
          this.$notify.success("修改成功");
          this.isModify=false;
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    handleCoverSuccess(res) {
      if (res.code == "20000") {
        this.$set(this.Addform, 'img_file', res.data)
        console.log(this.Addform)
      }
    },
    handleCoverSuccessEdit(res) {
      if (res.code == "20000") {
        console.log(res.data);
        this.$set(this.Editform, 'img_file', res.data)
        console.log(this.Editform);
        console.log(this.tableData);
        // this.Editform.brandImg = res.data;
      }
    },
    swiperNum(){
      this.isModify=true;
      request.get("/api/swiper/getSwiperNum").then((res)=>{
        console.log(res);
        if(res.code===20000){
          this.swiperNum1= res.data;
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    addMsg() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          console.log(this.Addform);
          request.post("/api/swiper/save", this.Addform).then((res) => {
            if (res.code == "20000") {
              this.$notify.success("新增成功");
              this.$refs["ruleForm"].resetFields();
              this.IsAdd = false;
              this.load();
            } else {
              this.$notify.error(res.message);
            }
          });
        }
      });
    },
    editMsg() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          request.put("/api/swiper/update", this.Editform).then((res) => {
            if (res.code === 20000) {
              this.$notify.success("更新成功");
              this.$refs["ruleForm"].resetFields();
              this.IsEdit = false;
              this.load();
            }
          }).catch(error=>{
            this.$notify.error(error);
          });

        }
      });
    },
    edit(row) {
      this.IsEdit = true;

      request.put("/api/swiper/getById/"+row.id).then((res)=>{
        console.log(res);
          if(res.code===20000){
            this.Editform= res.data;
          }
      }).catch((error)=>{
        console.log(error)
      })
    },
    load() {
      request
          .get("/api/swiper/page", {
            params: this.params,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.tableData = res.data.list;
              this.total = res.data.total;
              console.log(this.tableData)
            }
          });
    },
    reset() {
      this.params = {
        pageSize: 10,
        pageNum: 1,
        brandSrc: "",
      };
      this.load();
    },
    // 换页
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.load();
    },
    add() {
      this.IsAdd = true;
    },
    del(id) {
      request.delete("/api/swiper/delete/" + id).then((res) => {
        if (res.code === 20000 ) {
          this.$notify.success("删除成功");
          this.load();
        } else {
          this.$notify.error(res);
        }
      });
    },
  },
};
</script>

<style scoped>


.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 118px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>